<template>
    <div class="login">
        <div class="login-wrapper">
            <div class="login-table">
                <el-form class="login-form" :model="loginForm" :rules="rules" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input type="text" placeholder="请输入账号" v-model="loginForm.username"  clearable>
                            <i slot="prefix" class="el-icon-user"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="passwd">
                        <el-input type="password" placeholder="请输入密码" v-model="loginForm.passwd" show-password>
                            <i slot="prefix" class="el-icon-lock"></i>
                        </el-input>                   
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input type="text" placeholder="请输入验证码" v-model="loginForm.code" class="code">
                            <i slot="prefix" class="el-icon-key"></i>
                        </el-input>
                        <div class="code-img">                     
                            <img :src="loginForm.code_path" @click="getCode()">
                                                  
                        </div>                   
                    </el-form-item>
                    <el-form-item >
                        <el-checkbox>记住密码</el-checkbox>
                        <a href="#" class="pass-a">忘记密码</a>                
                    </el-form-item>
                </el-form>
                <div class="login-button">
                    <el-button type="primary" @click="loginSubmit()">登录</el-button>
                </div>
                <div class="login-three">
                    <a href="" class="three-a qq">
                        <i class="fa fa-qq" aria-hidden="true"></i>
                    </a>

                    <a href="" class="three-a wx">
                        <i class="fa fa-weixin" aria-hidden="true"></i>
                    </a>

                    <a href="" class="three-a wb">
                        <i class="fa fa-weibo" aria-hidden="true"></i>
                    </a>                   
                </div>

            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            loginForm:{
                username:'',
                passwd:'',
                code:'',
                code_path:'',
                code_key:'',
            },
            //表单验证
            rules:{
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                passwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ],

            },
            
        }
    },
    
    mounted(){
        this.getCode();

    },
    methods:{

        //验证码
        getCode(){
            window.axios.get('/api/user/captchaSrc').then((res) => {                
                if (res.data.code == 200) {
                    this.loginForm.code_path = res.data.captcha.img;
                    this.loginForm.code_key = res.data.captcha.key;
                    this.loginForm.code ='';
                } else {
                    this.$message(res.data.msg);
                }
            });
            
        },

        //登陆提交
        loginSubmit(){
            this.$refs.loginForm.validate((valid)=>{
                if(valid){
                    let dt = this.loginForm;
                    window.axios.post('/api/user/login',dt).then((res) => { 
                        //不管返回成功与否都刷新验证码
                        this.getCode();
                        if (res.data.code == 200) {

                            this.$message({
                                showClose: true,
                                message:res.data.msg,
                                type: 'success'
                            });
                            this.$router.push('/admin');
                            
                        }else if(res.data.code == 40011){
                            this.$message({
                                showClose: true,
                                message:res.data.msg,
                                type: 'error'
                            });                         
                        }else {
                            this.$message(res.data.msg);
                        }
                    });

                }
            });
            



        }

    },

    
}
</script>

<style>
    .login{
        padding:0;
        margin:0;

    }
    .login-wrapper{
        padding:50px 20px;
    }
    .login-table{
        width:360px;
        background: #fff;
        border-radius: 3px;
        box-shadow: 1px 3px 7px 0 rgb(12 64 168 / 20%);
        margin:0 15% 0 auto;

    }
    .login-form{
        padding:20px 35px 0 35px;
    }
    .el-input__inner, .el-cascader {
        height: 40px;
    }

    .code{
        float:left;
        width: 167px;
    }
    .code-img img{
        width: 105px;
        height: 38px;
        margin-left: 15px;
        border: 1px solid #DCDFE6;
        cursor: pointer;
    }

    .login-button{
        width:100%;
        text-align: center;
    }

    .login-button .el-button{
        width: 220px;
    }

    .pass-a{
        float:right;
        color:#409eff;
    }

    .login-three{
        height:30px;
        padding:25px;
        text-align: center;
    }
    .three-a{
        display: inline-block;
        padding:7px;
        margin:0 7px;
        width:19px;     
        border-radius: 50%;
    }
    .qq{
        background:rgb(52, 146, 237);;
    }
    .wx{
        background:rgb(77, 175, 41);   
    }
    .wb{
        background:rgb(207, 25, 0);;
    }
    .fa-qq,.fa-weixin,.fa-weibo{
        color:#fff;
    }

</style>